/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Released under MIT see LICENSE.txt in the project root for license information.
 * Copyright (c) 2013-2021 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

@import (reference) '../../styles/variables';

:root {
	--viewer_width: 70px;
	--viewer_height: 24px;
	--resizer-handle-size: 10px;
	--resizer-border-color: #98c1f1;
	--resizer-handle-color: #5ba4f3;
	--resizer-handle-hover-color: #537ebb;
}

[data-jodit_iframe_wrapper] {
	position: relative;
	display: block;
	user-select: none;

	&::after {
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: block;
		background: rgba(0, 0, 0, 0);
		content: '';
		cursor: pointer;
	}
}

.jodit-resizer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	font-size: 0;
	outline: 3px solid var(--resizer-border-color);
	pointer-events: none;

	* {
		box-sizing: border-box;
	}

	> span {
		position: absolute;
		top: 50%;
		left: 50%;

		display: inline-block;
		overflow: visible;
		width: var(--viewer_width);
		height: var(--viewer_height);
		margin-top: calc(var(--viewer_height) / -2);
		margin-left: calc(var(--viewer_width) / -2);

		background-color: var(--color-placeholder);
		color: var(--color-white);

		font-size: 12px;
		line-height: var(--viewer_height);

		opacity: 0;
		text-align: center;
		transition: opacity 0.2s linear;
	}

	> div {
		position: absolute;
		z-index: 4;
		display: inline-block;

		width: var(--resizer-handle-size);
		height: var(--resizer-handle-size);

		background-color: var(--resizer-handle-color);
		pointer-events: all;

		&:hover {
			background-color: var(--resizer-handle-hover-color);
		}

		&:nth-child(1) {
			top: calc(var(--resizer-handle-size) / -2);
			left: calc(var(--resizer-handle-size) / -2);
			cursor: nw-resize;
		}

		&:nth-child(2) {
			top: calc(var(--resizer-handle-size) / -2);
			right: calc(var(--resizer-handle-size) / -2);
			cursor: ne-resize;
		}

		&:nth-child(3) {
			right: calc(var(--resizer-handle-size) / -2);
			bottom: calc(var(--resizer-handle-size) / -2);
			cursor: se-resize;
		}

		&:nth-child(4) {
			bottom: calc(var(--resizer-handle-size) / -2);
			left: calc(var(--resizer-handle-size) / -2);
			cursor: sw-resize;
		}

		@media (max-width: @screen-sm) {
			:root {
				--resizer-handle-size: calc(var(--resizer-handle-size) * 2);
			}
		}
	}
}
